<template>
	<view class="container">
		<view class="bg">
			<view class="navtitle">
				<view class="left" @click="back"></view>
				<view class="title">
					确认订单
				</view>
			</view>
		</view>
		<view class="card">
			<uni-card style="border-radius: 20rpx">
				<view class="step">
					<view class="blue">预约服务</view>
					<view class="line"></view>
					<view class="green">支付订单</view>
					<view class="line"></view>
					<view class="red">门店服务</view>
				</view>
				<view class="gap">
					<u-gap height="4rpx" width="100rpx" bgColor="#e7e7e7"></u-gap>
				</view>
				<view class="info">
					<uni-section class="mb-10" title="伟业汽车美容店(人民路店)" sub-title="山阳区人民中路33号">
						<template v-slot:decoration>
							<view class="decoration">
								<image src="../../static/user3/shop.png" mode=""></image>
							</view>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="张先生">
						<template v-slot:decoration>
							<view class="decoration">
								<image src="../../static/user3/user.png" mode=""></image>
							</view>
						</template>
						<template v-slot:right>
							<span style="color:#bcbcbc ;">181238128</span>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="立即预约" @click="show = true">
						<template v-slot:decoration>
							<view class="decoration">
								<image src="../../static/user3/appoint.png" mode=""></image>
							</view>
						</template>
						<template v-slot:right>
							<view class="right">
							</view>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="帕拉梅拉" @click="gocar">
						<template v-slot:decoration>
							<view class="decoration">
								<image src="../../static/user3/car.png" mode=""></image>
							</view>
						</template>
						<template v-slot:right>
							<view class="right">
							</view>
						</template>
					</uni-section>
				</view>
				<view class="gap">
					<u-gap height="5rpx" width="100rpx" bgColor="#f4f4f4"></u-gap>
				</view>
				<view class="service">
					<uni-section class="mb-10" title="服务产品">
						<template v-slot:right>
							供选择<span style="color: #5594fa;">2项</span>服务产品
						</template>
					</uni-section>
					<view class="serviceinfo">
						小保养套餐1(合成机油+机滤) <span style="color: #ff815d;">￥39.9</span>
					</view>
					<view class="serviceinfo">
						小保养套餐1(合成机油+机滤) <span style="color: #ff815d;">￥39.9</span>
					</view>
				</view>

				<view class="gap">
					<u-gap height="5rpx" width="100rpx" bgColor="#f4f4f4"></u-gap>
				</view>
				<uni-section class="mb-10" title="代金券/优惠券" @click="gocoupon">
					<template v-slot:decoration>
						<view class="decoration">
							<image src="../../static/user3/youhui.png" mode=""></image>
						</view>
					</template>
					<template v-slot:right>
						<view class="daiqianquan">
							<span style="color: #ff815d;margin-right: 10rpx;">-10元</span>
							<view class="right">
							</view>
						</view>
					</template>
				</uni-section>
			</uni-card>
		</view>
		<view class="bottom">
			<view class="left">
				<img src="../../static/user3/kef.png" style="height: 40rpx;width: 40rpx;" />
				<span style="font-size: 32rpx;">联系客服</span>
			</view>
			<view class="right">
				<span style="color: #ff815d;">合计:￥79.8</span>
				<u-button type="primary" shape="circle"
					style="width: 200rpx;height: 70rpx;background-color: #0863e7;">提交订单</u-button>
			</view>
		</view>

		<!-- 弹出层 -->
		<view>

			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @cancel="close"
				@confirm="confirm"  :minDate="starttime" :maxDate="endtime"></u-datetime-picker>

			<!-- 			<u-popup :show="show" mode="center" @close="close" @open="open" :customStyle="popclass">
				<view class="popup">
					<view class="title">
						预约时间
					</view>
					<view class="dateinfo">
						2023年
					</view>
					<view class="gap">
						<u-gap height="6rpx" bgColor="#dddddd" style="width: 640rpx;"></u-gap>
					</view>
					<view class="appoint">
						立即预约
					</view>
					<view class="gap">
						<u-gap height="4rpx" bgColor="#dddddd" style="width: 640rpx;"></u-gap>
					</view>
				</view>
			</u-popup> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starttime:0,
				endtime:0,
				value1: Number(new Date()),
				show: false,
				popclass: {
					backgroundColor: '#f0f0f0',
					width: "680rpx",
					height: "500rpx",
					'border-radius': "20rpx"
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.show = false
			},
			confirm(e) {
				console.log(e);
				this.show=false
			},
			getYear(){
				// var year=new Date().getFullYear()
				// const date = new Date(Date.UTC(year, 0, 1));
				// console.log(year);
				// console.log(date.getTime());
				this.starttime=new Date().getTime()
				var a=this.starttime+7*24*60*60*1000
				this.endtime=a
				
			},
			gocar(){
				uni.navigateTo({
					url:"/pages/user3/choose_car/choose_car"
				})
			},
			gocoupon(){
				uni.navigateTo({
					url:"/pages/user3/coupon/coupon"
				})
			}
		},
		mounted() {
			this.getYear()
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		height: 400rpx;
		background-color: #3183fb;
		overflow: hidden;
	}

	.navtitle {
		display: flex;
		margin-top: 40rpx;
		/* border: 1px solid red; */
		align-items: center;
	}

	.navtitle .left {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
		border-left: 2px solid white;
		border-bottom: 2px solid white;
		transform: rotate(45deg);
	}

	.bg .title {
		color: #e0ebfd;
		font-size: 42rpx;
		margin-left: 260rpx;
	}

	.card {
		margin-top: -290rpx;
	}

	.step {
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-around;
	}

	.blue {
		width: 140rpx;
		height: 140rpx;
		background-color: #3281e7;
		color: white;
		border-radius: 50%;
		line-height: 140rpx;
		text-align: center;
	}

	.green {
		width: 140rpx;
		height: 140rpx;
		background-color: #03c47c;
		color: white;
		border-radius: 50%;
		line-height: 140rpx;
		text-align: center;
	}

	.red {
		width: 140rpx;
		height: 140rpx;
		background-color: #fc7852;
		color: white;
		border-radius: 50%;
		line-height: 140rpx;
		text-align: center;
	}

	.line {
		width: 80rpx;
		height: 70rpx;
		border-bottom: 1px dotted #cbcbcb;
	}

	.gap {
		margin-top: 30rpx;
	}

	.info {
		background-color: #3183fb;
		/* border: 1px solid red; */
	}

	.decoration image {
		width: 46rpx;
		height: 46rpx;
		margin-right: 20rpx;
	}

	.mb-10 .right {
		width: 20rpx;
		height: 20rpx;
		border-top: 2px solid #64a8fe;
		border-right: 2px solid #64a8fe;
		transform: rotate(45deg);
	}

	.daiqianquan {
		display: flex;
		align-items: center;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom .left {
		display: flex;
		align-items: center;
	}

	.bottom .right {
		display: flex;
		/* border: 1px solid red; */
		width: 360rpx;
		align-items: center;
	}

	.serviceinfo {
		margin-left: 20rpx;
		margin-bottom: 10rpx;
		font-weight: 600;
	}

	/* 	.popup {
		text-align: center;
	}

	.title {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.dateinfo {
		font-size: 24rpx;
		color: #9c9c9c;
	}

	.popup .gap {
		margin-top: 2rpx;
		margin-left: 20rpx;
	}

	.appoint {
		text-align: left;
		margin: 5rpx 0 5rpx 20rpx;
		font-size: 26rpx;
	} */
</style>